<%@ page language="java" contentType="text/html; charset=US-ASCII"
    pageEncoding="US-ASCII"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<br>

<div class="row">
	<div class="col-lg-3">
		<div class="panel panel-primary" id="schedulerList">
			<div class="panel-heading  clearfix">
				<i class="fa fa-list-alt"></i> <a  style="color:white" data-toggle="collapse" href="#schedulerListCollapse">Schedulers</a>
				<div class="pull-right">
					<div class="btn-group">
                       <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
                           Regions
                           <span class="caret"></span>
                       </button>
                       
                       <ul class="dropdown-menu pull-right" role="menu" id="schedulerRegionSelectList">
                     	          
                       </ul>
	                 </div>
					 <div class="btn-group">
					 	<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
                           Actions
                           <span class="caret"></span>
                       </button>
                       <ul class="dropdown-menu pull-right" role="menu">
                     	   <li><a id="addScheduler"><i class="fa fa-plus fa-fw"></i>Add</a></li>
                           
                          
                       </ul>
					 </div>
				</div>
			</div>
			<div id="schedulerListCollapse" class="panel-collapse collapsein">
				 <div class="panel-body">
				 
				 	<table class="table table-hover table-condensed" style="border: 0px" id="schedulerListTable">
						<tbody id="schedulerListTableBody">
						</tbody>
					</table>
				 </div>
			</div>
		</div>
	</div>
	<div class="col-lg-9" style="height:100%;">
		<div id="scheduler-alert-container"></div>
		<div class="panel panel-primary">
			<div class="panel-heading">
				<i class="fa fa-pencil-square-o"></i> <a style="color:white" data-toggle="collapse" href="#schedulerDetailsCollapse">Scheduler Details</a>
					<a id="jobDetailRefresh"><i class="fa fa-refresh text-danger"></i></a>
				 <div class="pull-right">
				 	 <div class="btn-group">
				 	 	<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
                           Actions
                           <span class="caret"></span>
                       </button>
                       <ul class="dropdown-menu pull-right" role="menu">
                     	   <li><a  id="saveScheduler"><i class="fa fa-floppy-o fa-fw"></i>Save</a></li> 
                     	   <li><a id="deleteScheduler"><i class="fa fa-times fa-fw"></i>Remove</a></li>  
                     	   <li><a  id="resetSchduler"><i class="fa fa-eraser fa-fw"></i>Reset</a></li> 
                     	   <li><a  id="sechdulerJob"><i class="fa fa-bell fa-fw"></i>Scheduled</a></li>  
                     	   <li><a  id="unSechdulerJob"><i class="fa  fa-bell-slash fa-fw"></i>UnScheduled</a></li> 
                     	   <li><a  id="schedulerSettingBtn"><i class="fa fa-cog fa-fw"></i>Setting</a></li>   
                       </ul>
				 	 </div>
				 </div> 
			</div>
			<div id="schedulerDetailsCollapse" class="panel-collapse collapsein">
				<div class="panel-body">
					<form class="form-horizontal" role="form" id="schedulerDetailsForm">
						
							<div class="form-group">
								<label for="name" class="col-sm-2 control-label">Service Name:</label>
		                   		<div class="col-sm-4">
		                       		 <input id="jobId"  type="hidden" class="form-control"/>
		                      		 <input id="name" type="text"  class="form-control input-sm"  placeholder="Enter Scheduler Name" />
		                       </div>
		                       <label for="region" class="col-sm-2 control-label">Region Name:</label>
		                       <div class="col-sm-4">
		                          <select id="region"  class="form-control input-sm">  	
			                       	<option>LOCAL</option>
			                       	<option>DEV</option>
			                       	<option>TEST</option>
			                       	<option>SIT</option>
			                       	<option>QA</option>
			                       	<option>PROD</option>
				                  </select>
			                  </div>
							</div>
							<div class="form-group">
	                   		 	  <label for="description" class="col-sm-2 control-label">Description:</label>
			                      <div class="col-sm-6">
			                       		<input id="description" type="text"  class="form-control input-sm"  placeholder="Enter Description" />
			                       </div>
			                </div>
			                <div class="form-group">
                   		 	   <label for="serverName" class="col-sm-2 control-label">ServerName:</label>
		                     
		                       <div class="col-sm-4">
		                       		<input id="serverName" type="text"  class="form-control input-sm"  placeholder="Enter ServerName" />
		                       </div>
		                       <label for="port" class="col-sm-2 control-label">Server Port:</label>
		                       <div class="col-sm-4">
		                          	<input id="port" type="text"  class="form-control input-sm"  value="22" />
			                  </div>
					        </div>
			                <div class="form-group">
                   		 	   <label for="username" class="col-sm-2 control-label">Username:</label>
		                     
		                       <div class="col-sm-4">
		                       		<input id="username" type="text"  class="form-control input-sm"  placeholder="Enter username" />
		                       </div>
		                       <label for="password" class="col-sm-2 control-label">Password:</label>
		                       <div class="col-sm-4">
		                          	<input id="password" type="password"  class="form-control input-sm"   />
			                  </div>
					        </div>
					        <div class="form-group">
                   		 	   <label for="sendEmail" class="col-sm-2 control-label">sendEmail:</label>
		                     
		                       <div class="col-sm-4">
		                       		<select id="sendEmail"  class="form-control input-sm">
		                       		 			<option>FALSE</option>
					           	            	<option>TRUE</option>
					            	          
						             	     </select>
		                       </div>
		                       <label for="emailTo" class="col-sm-2 control-label">Email To:</label>
		                       <div class="col-sm-4">
		                          	<input id="emailTo" type="text"  class="form-control input-sm"  placeholder="Enter Email To" />
			                  </div>
					        </div>
					        <div class="form-group">
                   		 	   <label for="script" class="col-sm-2 control-label">Script:</label>
		                     
		                       <div class="col-sm-4">
		                       		<input id="script" type="text"  class="form-control input-sm"  placeholder="Enter Script" />
		                       </div>
		                       <label for="scriptUser" class="col-sm-2 control-label">Script User:</label>
		                       <div class="col-sm-4">
		                          	<input id="scriptUser" type="text"  class="form-control input-sm"  placeholder="Enter Script User" />
			                  </div>
					        </div>
					        <div class="form-group">
                   		 	   <label for="startTime" class="col-sm-2 control-label">StartTime:</label>
		                     
		                       <div class="col-sm-4">
		                       		<div  class="input-group"  id="startTimeDateTimePicker">
	                      		  		<input id="startTime" type="text" class="form-control input-sm"  placeholder="Start Time"/>
	                      		  		<span class="input-group-addon"><span class="glyphicon glyphicon-calendar" ></span>
	                      		  		</span>
	                        	 	 </div>
		                       </div>
		                       <label for="endTime" class="col-sm-2 control-label">End Time:</label>
		                       <div class="col-sm-4">
		                          
		                          	<div  class="input-group"  id="endTimeDateTimePicker">
	                      		  		<input id="endTime" type="text" class="form-control input-sm"  placeholder="End Time"/>
	                      		  		<span class="input-group-addon"><span class="glyphicon glyphicon-calendar" ></span>
	                      		  		</span>
	                        	 	 </div>
			                  </div>
					        </div>
					        <div class="form-group">
					        	<label for="interval" class="col-sm-2 control-label">Interval:</label>
					        	<div class="col-sm-4">
					        		<select id="interval"  class="form-control input-sm">
			           	            	<option>1</option>
			           	            	<option>5</option>
			           	            	<option>10</option>
			           	            	<option>15</option>
			            	           	<option>30</option>
			            	           	<option>60</option>
			             	    	 </select>
					        	</div>
					        	
                   		 	   <label for="repetitions" class="col-sm-2 control-label">Interval Unit:</label>
		                     
		                       <div class="col-sm-4">
			                       <select id="repetitions"  class="form-control input-sm">
		           	            	<option>NONE</option>
		           	            	<option>Min</option>
		            	           	<option>Hour</option>
		            	           	<option>Day</option>
		            	           	<option>Week</option>
		            	           	<option>Month</option>
			             	     </select>
		                       	
		                       </div>
		                       
					        </div>
					        <div class="form-group">
					           <label for="scheduledDate" class="col-sm-2 control-label">Scheduled Date:</label>
		                       <div class="col-sm-4">
		                          	
		                          	<div  class="input-group"  id="scheduledDateTimePicker">
	                      		  		<input id="scheduledDate" type="text" class="form-control input-sm"  placeholder="End Time"/>
	                      		  		<span class="input-group-addon"><span class="glyphicon glyphicon-calendar" ></span>
	                      		  		</span>
	                      		  	</div>
			                  </div>
					        </div >
					        <div class="form-group">
                   		 	   <label for="lastRun" class="col-sm-2 control-label">LastRun:</label>
		                     
		                       <div class="col-sm-4">
		                       		<p class="form-control-static" id="lastRun"></p>
		                       		
		                       </div>
		                       <label for="nextRun" class="col-sm-2 control-label">Next Run:</label>
		                       <div class="col-sm-4">
		                       		<p class="form-control-static" id="nextRun"></p>
		                          	
			                  </div>
					        </div>
					        <div class="form-group">
					        	<label for="status" class="col-sm-2 control-label">Status:</label>
		                        <div class="col-sm-4">
		                       		<p class="form-control-static" id="status"></p>
		                       		
		                         </div>
		                         <label for="cStatus" class="col-sm-2 control-label">Job Status:</label>
		                        <div class="col-sm-4">
		                       		<p class="form-control-static" id="cStatus"></p>
		                       		
		                         </div>
					        </div>
					</form>
					<div id="job-preference" ></div>
				</div>
				
			</div>
			
		</div>
		<div class="panel panel-primary">
			<div class="panel-heading">
				<i class="fa fa-pencil-square-o"></i> <a style="color:white" data-toggle="collapse" href="#jobSummaryDetailsCollapse">Job Summary</a>
				 <div class="pull-right">
				 </div>
			</div>
			<div id="jobSummaryDetailsCollapse" class="panel-collapse collapsein">
				<div class="panel-body">
					<div class="row">
						<div class="col-lg-3">
							<div id="jobSummaryDateSelect"></div>
							<table class="table table-hover table-condensed" style="border: 0px" id="jobSummaryListTable">
									<tbody id="jobSummaryListTableBody">
									</tbody>
							</table>
						</div>
						<div class="col-lg-9">
							<div role="tabpanel">
								<ul class="nav nav-tabs" role="tablist">
									<li role="presentation" class="active"><a href="#jobOutput" aria-controls="jobOutput" role="tab" data-toggle="tab">Output</a></li>
									<li role="presentation"><a href="#jobError" aria-controls="jobError" role="tab" data-toggle="tab">Error</a></li>
								</ul>
								<div class="tab-content">
									<div role="tabpanel" class="tab-pane active" id="jobOutput"></div>
									<div role="tabpanel" class="tab-pane" id="jobError"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
$(document).ready(function() {
	 var schedulerRegionName= uft.getSchedulerUniqueRegions();
	 var allSchedulers=[];
	 $("#schedulerRegionSelectList").empty();
	 if( !jQuery.isEmptyObject(schedulerRegionName)){
	 	jQuery.each( schedulerRegionName, function( i, val ) {
			var li= $('<li>' , {
						html : [ 
						         $('<a>', {
						        	 text: val
						         }).click(function(){
						         	updateSchedulerListTable($(this).text());
						         })
						         
						       ]
					})
			$("#schedulerRegionSelectList").append(li)	
		})
	 }
	var startT= $('#startTimeDateTimePicker').datetimepicker({
	 	format:'MM/DD/YY hh:mm A'
	 });
	var endT=  $('#endTimeDateTimePicker').datetimepicker({
	 	format:'MM/DD/YY hh:mm A'
	 });
	var scheT= $('#scheduledDateTimePicker').datetimepicker({
	 	format:'MM/DD/YY hh:mm A'
	 });
	 
	 $("#saveScheduler").click(function(){	
		var schedulerJob=getScheduleJob()
		uft.saveOrUpdateSchedulerJob(schedulerJob,"scheduler-alert-container");
		
	})
	$("#deleteScheduler").click(function(){
		if( !jQuery.isEmptyObject($("#jobId").val())){
			uft.deleteSchedulerJob(parseInt($("#jobId").val()),"scheduler-alert-container");
		}
	})
	
	$("#sechdulerJob").click(function(){
		if( !jQuery.isEmptyObject($("#jobId").val())){
			uft.schedulerJob(parseInt($("#jobId").val()),"scheduler-alert-container");
		}
	})
	
	$("#jobDetailRefresh").click(function(){
		if( !jQuery.isEmptyObject($("#jobId").val())){
			var id =$("#jobId").val();
			var regionName =$("#region").val();
			var schedulerJob= uft.getSchedulerJob(parseInt(id))
			setScheduleJob(schedulerJob);
			updateSchedulerListTable(regionName)
			
		}
	})
	$("#unSechdulerJob").click(function(){
	if( !jQuery.isEmptyObject($("#jobId").val())){
			uft.unSchedulerJob(parseInt($("#jobId").val()),"scheduler-alert-container");
		}
	})
	var jobDatePicker=$("#jobSummaryDateSelect").datepicker({
	 format: 'mm/dd/yyyy',
	 todayHighlight:true 
	}).on("changeDate", function(e){
       if( !jQuery.isEmptyObject($("#jobId").val()) && 
       			!jQuery.isEmptyObject($("#name").val()) &&
       			!jQuery.isEmptyObject($("#region").val()) && typeof e.date != undefined ){
       		var jobSummarylist=uft.getJobSummaryDetails(parseInt($("#jobId").val()),$("#name").val(),$("#region").val(),e.date);
       		updateJobSummaryListTable(jobSummarylist);
       }else{
      	 	$("#scheduler-alert-container").atf_warn_flyover("Please select a Job", "oops!")
       }
    });
	 $("#schedulerListTable tbody").on('click','tr', function () { 
		
		if(!$(this).hasClass('selected')){ 
			$("#schedulerListTable tbody tr").removeClass('selected');
			$(this).addClass('selected');
			var sId =$(this).find('td:first').text();
			var exist=$.grep(allSchedulers, function(obj) {
				return obj.jobId == sId;
			});
			if( !jQuery.isEmptyObject(exist)){
				var sObj=exist[0]
				setScheduleJob(sObj)
				var jobDate = new Date();
				jobDate.setHours(0, 0, 0, 0);
				var jobSummarylist=uft.getJobSummaryDetails(parseInt($("#jobId").val()),$("#name").val(),$("#region").val(),jobDate);
				updateJobSummaryListTable(jobSummarylist);
				
			}
		}
	})
	
	$("#jobSummaryListTable tbody").on('click','tr', function () { 
		
		if(!$(this).hasClass('selected')){ 
			$("#jobSummaryListTable tbody tr").removeClass('selected');
			$(this).addClass('selected');
			var sId =$(this).find('td:first').text();
			var output=$(this).find('td:nth-child(2)').text();
			var error=$(this).find('td:nth-child(3)').text();
			$("#jobOutput").html("<pre>"+output+"</pre")
			$("#jobError").html("<pre>"+error+"</pre")
		}
	})
	$( "#schedulerSettingBtn" ).click(function(){
        	if( !jQuery.isEmptyObject($("#jobId").val())){
        		var id =$("#jobId").val();
        		$("#job-preference").load("jsp/preferences.jsp?jobId="+id)
        	}else{
    			$("#scheduler-alert-container").atf_warn_flyover("No Job found", "oops!")
    		}
    })
    
    function getScheduleJob(){
    	var schedulerJob =  uft.getEmptySchedulerJob()
		dwr.util.getValues(schedulerJob);
		schedulerJob.startTime=uft.getDateObject($('#startTime').val(), "MM/DD/YY hh:mm A")
		schedulerJob.endTime=uft.getDateObject($('#endTime').val(), "MM/DD/YY hh:mm A")
		schedulerJob.scheduledDate=uft.getDateObject($('#scheduledDate').val(), "MM/DD/YY hh:mm A")
		schedulerJob.lastRun=uft.getDateObject($('#lastRun').val(), "MM/DD/YY hh:mm A")
		schedulerJob.nextRun=uft.getDateObject($('#nextRun').val(), "MM/DD/YY hh:mm A")
		return schedulerJob;
    }
    
    function setScheduleJob(sObj){
    	sObj.startTime=uft.getDataFormat(sObj.startTime, "MM/DD/YY hh:mm A")
		sObj.endTime=uft.getDataFormat(sObj.endTime, "MM/DD/YY hh:mm A")
		sObj.scheduledDate=uft.getDataFormat(sObj.scheduledDate, "MM/DD/YY hh:mm A")
		sObj.lastRun=uft.getDataFormat(sObj.lastRun, "MM/DD/YY hh:mm A")
		sObj.nextRun=uft.getDataFormat(sObj.nextRun, "MM/DD/YY hh:mm A")
		dwr.util.setValues(sObj);
    }
    
    function updateJobSummaryListTable(jobSummary){
    	dwr.util.removeAllRows("jobSummaryListTableBody");
    	$("#jobOutput").empty();
    	$("#jobError").empty();
    	jobSummary.sort(function(obj1, obj2) {
			if (obj1.startDate > obj2.startDate) return -1;
			if (obj1.startDate < obj2.startDate) return 1;
			return 0;
    	})
    	if(!jQuery.isEmptyObject(jobSummary)){
    		dwr.util.addRows( "jobSummaryListTableBody",jobSummary,[
    				function(data) { return data.summaryId; },
    				function(data) { return "<pre>"+data.jobOutput+"</pre>"; },
    				function(data) { return "<pre>"+data.jobError+"</pre>"; },
    				function(data){return uft.getDataFormat(data.startDate, "Do MMM YYYY, hh:mm:ss A")}
    				],{ 
			cellCreator:function(options) {
				 var row = document.createElement("td");
				 var cellNum=options.cellNum;
				 
				 if( cellNum == 0 || cellNum == 1 || cellNum == 2){
					 row.style.display="none"
				 }
				 return row;
				},
			escapeHtml:false });
    	}
    
    }
	 
	 function updateSchedulerListTable(regionName){
	 	allSchedulers= uft.getSchedulersByRegion(regionName);
	 	 if(!jQuery.isEmptyObject(allSchedulers)){
	 		 dwr.util.removeAllRows("schedulerListTableBody");
	 		 dwr.util.addRows( "schedulerListTableBody",allSchedulers,[function(data) { return data.jobId; },function(data){return data.name}],{ 
			 cellCreator:function(options) {
				 var row = document.createElement("td");
				 var cellNum=options.cellNum;
				 if( cellNum == 0){
					 row.style.display="none"
				 }
				 return row;
				},
			escapeHtml:false });
	 	 }
	 }
})
</script>